<template>
  <div style="width: 97%; margin: auto;">
    <h2>机构设置情况</h2>
    <el-row style="margin-top: 20px;">
      <el-col :span="18">
        <h3>分支机构(专项基金管理机构)、代表机构情况表</h3>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="primary" @click="addList1()" size="default" style="width: 100px;margin-top: 12px;">增加
        </el-button>
      </el-col>
    </el-row>

    <el-form :model="form" ref="mechanismRef" :rules="mechanismRules" label-width="150px">
      <el-row :gutter="20" v-for="(item,index) in form.mechanismList" :key="index" style="margin-bottom: 20px;">
        <el-col style="margin-bottom: 15px;" :span="23">
          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">基本信息</span>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="24">
          <el-form-item :prop="'mechanismList.' + index+'.mechanismName'"  :rules="mechanismRules.mechanismName" label="机构名称">
            <el-input v-model="item.mechanismName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item  :prop="'mechanismList.' + index+'.mechanismType'" label="机构类型" :rules="mechanismRules.mechanismType">
            <el-select clearable  style="width: 100%;" disabled v-model="item.mechanismType" placeholder="请选择">
              <el-option v-for="dict in orgTypeOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.establishType'" label="设立方式" :rules="mechanismRules.establishType">
            <el-select clearable  style="width: 100%;" v-model="item.establishType" placeholder="请选择">
              <el-option v-for="dict in establishWayOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.establishTime'" label="设立时间" :rules="mechanismRules.establishTime">
            <el-date-picker
              value-format="YYYY-MM-DD"
              v-model="item.establishTime"
              type="date"
              style="width: 100%;"
              placeholder="设立时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.associationWebsite'" label="是否在协会网站公开" :rules="mechanismRules.associationWebsite">
            <el-select clearable  style="width: 100%;" v-model="item.associationWebsite" placeholder="请选择">
              <el-option v-for="dict in shiOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.mechanismAddress'" label="住所" :rules="mechanismRules.mechanismAddress">
            <el-input v-model="item.mechanismAddress" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.postalCode'" label="邮编" :rules="mechanismRules.postalCode">
            <el-input type="number" v-model="item.postalCode" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="24">
          <el-form-item :prop="'mechanismList.' + index+'.mechanismBusinessScope'" label="业务范围" :rules="mechanismRules.mechanismBusinessScope">
            <el-input type="textarea" v-model="item.mechanismBusinessScope" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="23">
          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">负责人</span>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.mechanismResponsibleName'" label="姓名" :rules="mechanismRules.mechanismResponsibleName">
            <el-input v-model="item.mechanismResponsibleName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.responsibleSex'" label="性别" :rules="mechanismRules.responsibleSex">
            <el-select clearable  style="width: 100%;" v-model="item.responsibleSex" placeholder="请选择">
              <el-option v-for="dict in sexOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.responsibleBirthday'" label="出生年月" :rules="mechanismRules.responsibleBirthday">
            <el-date-picker
              style="width: 100%;"
              value-format="YYYY-MM-DD"
              v-model="item.responsibleBirthday"
              type="date"
              placeholder="出生年月">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.responsiblePolitics'" label="政治面貌" :rules="mechanismRules.responsiblePolitics">
            <el-select clearable  style="width: 100%;" v-model="item.responsiblePolitics" placeholder="请选择">
              <el-option v-for="dict in politicsOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.responsibleQualification'" label="学历" :rules="mechanismRules.responsibleQualification">
            <el-select clearable  style="width: 100%;" v-model="item.responsibleQualification" placeholder="请选择">
              <el-option v-for="dict in xueliOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.organizationalStructure'" label="任职程序" :rules="mechanismRules.organizationalStructure">
            <el-select clearable  style="width: 100%;" v-model="item.organizationalStructure" placeholder="请选择">
              <el-option v-for="dict in organizationalStructure" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item :prop="'mechanismList.' + index+'.mechanismTelephone'" label="手机号码" :rules="mechanismRules.mechanismTelephone">
            <el-input type="number" v-model="item.mechanismTelephone" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
<!--        <el-col style="margin-bottom: 15px;" :span="23">-->
<!--          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">组织机构</span>-->
<!--        </el-col>-->
<!--        <el-col style="margin-bottom: 15px;" :span="24">-->
<!--          <el-form-item :prop="'mechanismList.' + index+'.organizationBaseName'" label="组织机构" :rules="mechanismRules.organizationBaseName">-->
<!--            <el-input v-model="item.organizationBaseName" placeholder="请输入"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col style="margin-bottom: 15px;" :span="23">
          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">财务管理〔专项基金管理机构填写本栏〕</span>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="financialAccounting" label="财务核算">
            <el-select clearable  style="width: 100%;" v-model="item.financialAccounting" placeholder="请选择">
              <el-option v-for="dict in financialAccountingOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="specialFund"  label="原始数额">
            <el-input type="number" v-model="item.specialFund" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="specialFundOther" label="年末余额" >
            <el-input type="number" v-model="item.specialFundOther" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>

        <el-col style="margin-bottom: 15px;" :span="23">
          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">活动业务</span>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="24">
          <el-form-item :prop="'mechanismList.' + index+'.businessActivities'" label="年度主要业务活动概述" :rules="mechanismRules.businessActivities">
            <el-input type="textarea" v-model="item.businessActivities" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row style="margin-top: 20px;">
      <el-col :span="18">
        <h3>办事机构情况表</h3>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button size="default" style="width: 100px;margin-top: 12px;" type="primary" @click="addList2()">增加
        </el-button>
      </el-col>
    </el-row>
    <el-form :model="workList" ref="workListRef" :rules="workRules">
      <el-row>
        <el-col :span="24" style="margin-top: 20px;">
          <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" size="default" :data="workList"
                    border>
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column prop="mechanismName" label="机构名称" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismName'" :rules="workRules.mechanismName">
                  <el-input v-model="scope.row.mechanismName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="mechanismFunction" label="职能" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismFunction'" :rules="workRules.mechanismFunction">
                  <el-input v-model="scope.row.mechanismFunction" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="mechanismTelephone" label="联系方式" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismTelephone'"
                              :rules="workRules.mechanismTelephone">
                  <el-input type="number" v-model="scope.row.mechanismTelephone" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="establishTime" label="设立时间" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].establishTime'" :rules="workRules.establishTime">
                  <el-date-picker
                    value-format="YYYY-MM-DD"
                    v-model="scope.row.establishTime"
                    type="date"
                    placeholder="设立时间">
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="80">
              <template #default="scope">
                <el-button type="text" size="default" @click="workDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top: 20px;">
      <el-col :span="18">
        <h3>实体机构情况表（没有就不填）</h3>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button size="default" style="width: 100px;margin-top: 12px;" type="primary" @click="addList3()">增加
        </el-button>
      </el-col>
    </el-row>
    <el-form :model="entityList" ref="entityListRef">
      <el-row>
        <el-col :span="24" style="margin-top: 20px;">
          <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" size="default" :data="entityList"
                    border>
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column prop="mechanismName" label="机构名称" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismName'" :rules="entityRules.mechanismName">
                  <el-input v-model="scope.row.mechanismName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="mechanismRegisteredCapital" label="注册资金" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismRegisteredCapital'"
                              :rules="entityRules.mechanismRegisteredCapital">
                  <el-input type="number" v-model="scope.row.mechanismRegisteredCapital" placeholder="请输入">
                    <template #append>万元</template>
                  </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="establishTime" label="设立时间" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].establishTime'" :rules="entityRules.establishTime">
                  <el-date-picker
                    value-format="YYYY-MM-DD"
                    v-model="scope.row.establishTime"
                    type="date"
                    placeholder="设立时间">
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="mechanismShareholdingRatio" label="持股比例" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismShareholdingRatio'"
                              :rules="entityRules.mechanismShareholdingRatio">
                  <el-input v-model="scope.row.mechanismShareholdingRatio" placeholder="请输入">
                    <template #append>%</template>
                  </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="mechanismBusinessScope" label="经营范围" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismBusinessScope'"
                              :rules="entityRules.mechanismBusinessScope">
                  <el-input type="textarea" v-model="scope.row.mechanismBusinessScope" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="80">
              <template #default="scope">
                <el-button type="text" size="default" @click="entityDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {
  getDictByCode,
  getTableInfoByPage,
  stSaveBase, stSaveMechanism,
  stSaveMechanismEntity,
  stSaveMechanismWork
} from '@/views/yearCheck/ykb/st/st'
import { deleteJG } from '@/views/yearCheck/ykb/mf/mf'

export default {
  data() {
    return {
      year: undefined,
      politicsOptions: undefined,
      countryOptions: undefined,
      orgTypeOptions: [{ id: '1', name: '办事机构' }, { id: '2', name: '实体机构' }, { id: '3', name: '分支机构' }],
      xueliOptions: undefined,
      establishWayOptions: undefined,
      organizationalStructure:undefined,
      financialAccountingOptions:undefined,
      sexOptions: [{ id: 1, name: '男' }, { id: 2, name: '女' }],
      shiOptions: [{ id: '1', name: '是' }, { id: '2', name: '否' }],
      mechanismRules: {
        mechanismName: [{ required: true, message: '请完善', trigger: 'blur' }],
        mechanismBusinessScope: [{ required: true, message: '请完善', trigger: 'blur' }],
        // organizationBaseName: [{ required: true, message: '请完善', trigger: 'blur' }],
        mechanismTelephone: [{ required: true, message: '请完善', trigger: 'blur' }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式不正确',
          trigger: 'blur'
        }],
        organizationalStructure: [{ required: true, message: '请完善', trigger: 'blur' }],
        responsibleQualification: [{ required: true, message: '请完善', trigger: 'blur' }],
        responsiblePolitics: [{ required: true, message: '请完善', trigger: 'blur' }],
        responsibleBirthday: [{ required: true, message: '请完善', trigger: 'blur' }],
        responsibleSex: [{ required: true, message: '请完善', trigger: 'blur' }],
        mechanismResponsibleName: [{ required: true, message: '请完善', trigger: 'blur' }],
        postalCode: [{ required: true, message: '请完善', trigger: 'blur' }],
        mechanismAddress: [{ required: true, message: '请完善', trigger: 'blur' }],
        associationWebsite: [{ required: true, message: '请完善', trigger: 'blur' }],
        establishTime: [{ required: true, message: '请完善', trigger: 'blur' }],
        establishType: [{ required: true, message: '请完善', trigger: 'blur' }],
        mechanismType: [{ required: true, message: '请完善', trigger: 'blur' }]
      },
      postMechanism: {
        appointmentProcedures: '',//学历
        associationWebsite: '',//是否协会网站公开1-是 2-否 0-未知
        businessActivities: '',//业务活动
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        establishTime: '',//($date-time)设立时间/备案时间
        establishType: '',//设立方式
        examineYear: localStorage.getItem('examineYear'),//审查年度
        financialAccounting: '',//财务核算
        id: '',//
        mechanismAddress: '',//住所/注册地址
        mechanismBusinessScope: '',//机构经营范围
        mechanismName: '',//机构名称
        mechanismRegisteredCapital: '',//注册资金
        mechanismResponsibleName: '',//机构负责人姓名
        mechanismShareholdingRatio: '',//持股比例
        mechanismTelephone: '',//联系方式
        mechanismType: '3',//机构类型1-办事机构 2-实体机构 3-分支机构 4-代表机构
        organizationBaseId: '',//社团组织id
        organizationBaseName:'',
        organizationalStructure: '',//任职程序
        postalCode: '',//邮政编码
        responsibleBirthday: '',//($date-time)负责人出生日期
        responsiblePolitics: '',//代表人政治面貌
        responsibleQualification: '',//学历
        responsibleSex: '',//负责人性别1-男 2-女 0-未知
        specialFund: '',//专项基金
        specialFundOther: ''//专项基金剩余
      },
      form:{
        mechanismList: []
      },
      postWork: {
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        examineYear: localStorage.getItem('examineYear'),//审查年度
        id: '',//
        establishTime: '',//($date-time)设立时间/备案时间
        mechanismFunction: '',//职能
        mechanismName: '',//机构名称
        mechanismTelephone: '',//联系方式
        organizationBaseId: ''//社团组织id
      },
      workList: [],
      postEntity: {
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        organizationBaseId: '',//社团组织id
        examineYear: localStorage.getItem('examineYear'),//审查年度
        id: '',//
        establishTime: '',//($date-time)
        mechanismBusinessScope: '',//
        mechanismName: '',//
        mechanismRegisteredCapital: '',//
        mechanismShareholdingRatio: ''//

      },
      entityList: [],
      entityRules: {
        // establishTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        // mechanismBusinessScope: [{ required: true, message: '请完善', trigger: 'blur' }],
        // mechanismName: [{ required: true, message: '请完善', trigger: 'blur' }],
        // mechanismRegisteredCapital: [{ required: true, message: '请完善', trigger: 'blur' }],
        // mechanismShareholdingRatio: [{ required: true, message: '请完善', trigger: 'blur' }]
      },
      workRules: {
        // establishTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        // mechanismName: [{ required: true, message: '请完善', trigger: 'blur' }],
        // mechanismFunction: [{ required: true, message: '请完善', trigger: 'blur' }],
        // mechanismTelephone: [{ required: true, message: '请完善', trigger: 'blur' }, {
        //   pattern: /^1[3-9]\d{9}$/,
        //   message: '手机号格式不正确',
        //   trigger: 'blur'
        // }]
      }
    }
  },
  created() {

  },
  methods: {
    postInfo() {
      this.$refs.mechanismRef.validate(valid => {
        if (valid) {
          if (this.form.mechanismList == null || this.form.mechanismList.length == 0) {
            return
          }
          for (let i = 0; i < this.form.mechanismList.length; i++) {
            this.form.mechanismList[i].creditCode = localStorage.getItem('creditCode')
            this.form.mechanismList[i].examineYear = localStorage.getItem('examineYear')
          }
          stSaveMechanism(this.form.mechanismList).then(response => {
            this.$message({
              message: '分支机构、代理机构保存成功',
              type: 'success'
            })
            this.getInfo()
          })
        }
      })
      this.$refs.workListRef.validate(valid => {
        if (valid) {
          if (this.workList == null || this.workList.length == 0) {
            return
          }
          for (let i = 0; i < this.workList.length; i++) {
            this.workList[i].creditCode = localStorage.getItem('creditCode')
            this.workList[i].examineYear = localStorage.getItem('examineYear')
          }
          stSaveMechanismWork(this.workList).then(response => {
            this.$message({
              message: '办事机构保存成功',
              type: 'success'
            })
            this.getInfo()
          })
        } else {
          this.$message({
            message: '办事机构情况表-请填写完整',
            type: 'error'
          })
        }
      })

      this.$refs.entityListRef.validate(valid => {
        if (valid) {
          if (this.entityList == null || this.entityList.length == 0) {
            return
          }
          for (let i = 0; i < this.entityList.length; i++) {
            this.entityList[i].creditCode = localStorage.getItem('creditCode')
            this.entityList[i].examineYear = localStorage.getItem('examineYear')
          }
          stSaveMechanismEntity(this.entityList).then(response => {
            this.$message({
              message: '实体机构情况保存成功',
              type: 'success'
            })
            this.getInfo()
          })
        } else {
          this.$message({
            message: '实体机构情况表-请填写完整',
            type: 'error'
          })
        }
      })

    },
    addList1() {
      this.form.mechanismList.push({ ...this.postMechanism })
    },
    addList2() {
      this.workList.push({ ...this.postWork })
    },
    addList3() {
      this.entityList.push({ ...this.postEntity })
    },
    mechanismDelete(index) {
      if(this.form.mechanismList[index].id){
        deleteJG({creditCode: localStorage.getItem('creditCode'),examineYear: localStorage.getItem('examineYear'),mechanismType: '3'}).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      }else{
        this.form.mechanismList.splice(index, 1)
      }

    },
    entityDelete(index) {
      if(this.entityList[index].id){
        deleteJG({creditCode: localStorage.getItem('creditCode'),examineYear: localStorage.getItem('examineYear'),mechanismType: '2'}).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      }else{
        this.entityList.splice(index, 1);
      }
    },
    workDelete(index) {
      this.workList.splice(index, 1)
    },
    getInfo() {
      this.year = localStorage.getItem('examineYear')
      getTableInfoByPage(6).then(response => {
        this.form.mechanismList = response.data.mechanism
        this.workList = response.data.workList
        this.entityList = response.data.entityList

        if (this.workList == null) {
          this.workList = []
        }
        if (this.entityList == null) {
          this.entityList = []
        }
        if (this.form.mechanismList == null) {
          this.form.mechanismList = []
        }
        for (let i = 0; i < this.form.mechanismList.length; i++) {
          this.form.mechanismList[i].mechanismType += ''
          this.form.mechanismList[i].associationWebsite += ''
        }
      })
      //政治面貌politics 学历
      getDictByCode('politics').then(response => {
        this.politicsOptions = response.data
      })
      getDictByCode('country').then(response => {
        this.countryOptions = response.data
      })
      // getDictByCode('orgType').then(response => {
      //   this.orgTypeOptions = response.data;
      // });
      getDictByCode('xueli').then(response => {
        this.xueliOptions = response.data
      })
      getDictByCode('establishWay').then(response => {
        this.establishWayOptions = response.data
      })
      getDictByCode('organizationalStructure').then(response => {
        this.organizationalStructure = response.data
      })
      getDictByCode('financialAccounting').then(response => {
        this.financialAccountingOptions = response.data
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 16px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ababab; /* 设置单线边框 */
  padding: 6px; /* 单元格内边距 */
}

.el-form-item {
  margin-bottom: 0px;
}

:deep(.el-form-item__label) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  height: 32px;
  line-height: 16px;
}
</style>
